<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>人事管理</title>
    <script src="./lib/vue.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="./lib/elementui-index.js"></script>
    <script src="./lib/axios.min.js"></script>
    <script src="./lib/token.js"></script>
</head>
<body>
    <div id="app">
        <el-form ref="form" :rules="rules" :model="form" label-width="100px">
            <el-tag type="info">添加一名员工</el-tag>
            <el-form-item label="部门名称">
              <!-- <el-input v-model="form.dname"></el-input> -->
              <el-select @change="findAllTeam()" v-model="form.did" placeholder="请选择部门" >
                <el-option
                        
                        v-for="item in options"
                        :key="item.did"
                        :label="item.dname"
                        :value="item.did">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="班别">
                <!-- <el-input v-model="form.dname"></el-input> -->
                <el-select v-model="form.tid" placeholder="请选择班别">
                  <el-option
                          v-for="item in options2"
                          :key="item.tid"
                          :label="item.tname"
                          :value="item.tid">
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="姓名" style="width:318px ;">
                <el-input v-model="form.ename"></el-input>
              </el-form-item>

              <el-form-item label="性别" style="width:318px ;">
                <el-input v-model="form.esex"></el-input>
              </el-form-item>

              <el-form-item label="身份证号码" style="width:318px ;">
                <el-input v-model="form.idCard"></el-input>
              </el-form-item>

              <el-form-item label="民族" style="width:318px ;">
                <el-input v-model="form.nativePlace"></el-input>
              </el-form-item>

              <el-form-item label="家庭住址" style="width:318px ;">
                <el-input v-model="form.addr"></el-input>
              </el-form-item>

              <el-form-item label="联系方式" style="width:318px ;">
                <el-input v-model="form.etel"></el-input>
              </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="addEmp()">添加</el-button>
              <el-button type="primary" @click="form1()">重置</el-button>
            </el-form-item>


        </el-form>
    </div>

    <script>
        new Vue({
            el:"#app",
            data() {
                var checkdname = (rule, value, callback) => {
                    if (!value) {
                        return callback(new Error('部门名称不能为空'));
                    }
                    else{
                        if(value > 10){
                            callback(new Error("字数不能大于10"))
                        }else{
                            callback()
                        }
                    }
                };
               
                return {
                    form: {  
                        tid:'',
                        ename:'',
                        esex:'',
                        idCard:'',
                        nativePlace:'',
                        addr:'',
                        etel:''   
                    },
                    rules: {
                        dname: [
                            { validator: checkdname, trigger: 'blur' }
                        ],
                       
                    },
                    options: [],
                    options2: [],

                }
            },

            methods: {
                form1(){
                    this.form=[]
                },
                findAllDept(){

                    axios.get("http://localhost:8001/dept/Dept/findAllDept",{

                    })
                    .then(res=>{
                        this.options = res.data.data
                    })
                },
                findAllTeam(){
                    this.form.tid = ''
                    axios.get("http://localhost:8001/dept/team/findByDid",{
                            params:{
                                did:this.form.did
                            }
                    }).then(res=>{
                        this.options2 = res.data.data
                    })

                },
                addEmp(){
                    axios.post("http://localhost:8001/dept/emp/addEmp",this.form)
                        .then(res=>{
                            if(res.data.code === 20000){
                                this.$message.success("添加成功")
                                //location.href = "11.png"
                            }else{
                                this.$message.error("添加失败")
                            }
                    })
                },
            },
            created(){
                this.findAllDept()

            }
        })
    </script>
</body>
</html>